import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import EventBus from './eventBus'
const createRenderer = (sizes, box) => {
    const labelRenderer = new CSS3DRenderer();
    labelRenderer.setSize(sizes.width, sizes.height);
    labelRenderer.domElement.style.position = "absolute";
    // 避免renderer.domElement影响HTMl标签定位，设置top为0px
    labelRenderer.domElement.style.top = "0px";
    labelRenderer.domElement.style.left = "0px";
    //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
    labelRenderer.domElement.style.pointerEvents = "none";
    box.appendChild(labelRenderer.domElement);

    return labelRenderer
}


/**
 * 
 * @param {*} option name-名称 x,y,z, borderColor
 * @returns 
 */
const tagDivDefaultOption = {
    color: '#fff',
    background: '#0A3C86',
    borderColor: '#3963bc',
    padding: '4px 16px',
    scale: 0.5,
    fontSize: '14px',
    y: 1
}
const tagDiv = (obj = {
    name: '',
    x: 0,
    z: 0,
}) => {
    const option = { ...tagDivDefaultOption, ...obj };
    // 创建CSS元素
    const div = document.createElement('div');
    div.innerHTML = option.name;
    div.style.padding = option.padding;
    div.style.background = option.background;
    div.style.color = option.color;
    div.style.fontSize = option.fontSize;
    div.style.position = 'absolute';
    div.style.border = '1px solid #3963bc'
    div.style.letterSpacing = '2px';
    div.style.borderColor = option.borderColor
    div.className = 'elec_station'
    div.onclick = (ev) => {
        EventBus.emit('onStationClick', option)
    }
    // 创建three.js 模型对象
    const label = new CSS3DObject(div);
    label.name = option.name;
    label.position.set(option.x, option.y, option.z);
    label.rotateX(-Math.PI / 2);
    label.scale.set(option.scale, option.scale, option.scale)
    // div.style.pointerEvents = 'none';
    return label
}



/**
 * 
 * 从已有的标签建立CSS3Dobject
 * 此方法比较适用于Vue
 * @param {*} id 标签的ID 通常是名字加Index
 * @returns 
 */
const createTagFromVue = (id) => {
    console.log(id);
    const rowTag = document.getElementById(id);
    console.log(rowTag);
    const label = new CSS3DObject(rowTag);
    label.position.set(0, 2, 0);
    // label.scale.set(0.0008, 0.0008, 0.0008);

    label.rotateX(-Math.PI / 2);
    label.scale.set(0.5, 0.5, 0.5)
    // rowTag.style.pointerEvents = 'none';

    return label

}

// 创建小的盒子
// const boxDivDefaultOption = {

//     width: '10px',
//     height: '20px',
//     borderColor: '#ff5000',
//     background: '#ff2000',
// }
const boxDiv = (obj = {}) => {
    const option = { ...obj }
    // 创建CSS元素
    const div = document.createElement('div');
    div.style.width = option.width || '10px';
    div.style.height = option.height || '20px';
    div.style.background = option.background || '#ff2000';
    div.style.position = 'absolute';
    div.style.border = '1px solid #fff'
    div.style.borderColor = option.borderColor || '#ff2000'
    // 创建three.js 模型对象
    const label = new CSS3DObject(div);
    label.name = option.name || 'miniBox';
    label.position.set(option.x || 0, 0, option.z || 0);
    label.rotateX(-Math.PI / 2);
    label.scale.set(0.5, 0.5, 0.5)
    div.style.pointerEvents = 'none';
    return label
}

/**
 * 创建主要数据
 * @param {*} item lineData中的mainData数据 
 */
const createMainDataDefaultOption = {
    width: '14px',
    scale: 0.36
    // height: '20px',
    // borderColor: '#ff5000',
    // background: '#ff2000',
}
const createMainData = (item = {
    name: 'mainData',
    value: '0',
    x: 0,
    z: 0
}) => {
    const option = { ...createMainDataDefaultOption, ...item }
    // 创建CSS元素
    const div = document.createElement('div');
    div.innerHTML = option.name + option.value;
    div.style.width = option.width;
    div.style.height = option.height;
    div.style.wordBreak = 'break-word'
    div.style.textAlign = 'center'
    // div.style.background = option.background;
    div.style.color = '#f5f5f5'
    div.style.position = 'absolute';
    // div.style.border = '1px solid #fff'
    div.style.fontSize = '12px'
    // div.style.borderColor = option.borderColor
    // 创建three.js 模型对象
    const label = new CSS3DObject(div);
    label.name = option.name;
    label.position.set(option.x, 0, option.z);
    label.rotateX(-Math.PI / 2);
    label.scale.set(option.scale, option.scale, option.scale)
    div.style.pointerEvents = 'none';
    return label
}

/**
 * 创建次要数据
 * @param {*} obj 次要数据列表
 */
const createSubData = (obj = {}) => {
    const scale = 0.26
    // 创建CSS元素
    const div = document.createElement('div');
    div.innerHTML = `
    <span>${obj.list[0] || 0}</span>
    <span style="color:#ccc">${obj.list[1] || 0}</span>
    <span style="color:#7EABC3">${obj.list[2] || 0}</span>
    <span style="color:#308377">${obj.list[3] || 0}</span>
    `
    div.style.display = 'flex';
    div.style.alignItems = 'center';
    div.style.flexDirection = 'column';
    div.style.textAlign = 'right'
    div.style.width = '50px';
    // div.style.height = option.height;
    // div.style.background = '#3963bc';
    div.style.color = '#f5f5f5'
    div.style.position = 'absolute';
    // div.style.border = '1px solid #fff'
    div.style.fontSize = '12px'
    // div.style.borderColor = option.borderColor
    // 创建three.js 模型对象
    const label = new CSS3DObject(div);
    label.name = 'subData';
    label.position.set(obj.position[0], 0, obj.position[1]);
    label.rotateX(-Math.PI / 2);
    label.scale.set(scale, scale, scale)
    div.style.pointerEvents = 'none';
    return label
}

export default {
    tagDiv,
    boxDiv,
    createRenderer,
    createMainData,
    createSubData,
    createTagFromVue
}